/*
 * @Description: 
 * @Version: 2.0
 * @Author: cxc
 * @Date: 2022-03-29 20:08:57
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-08 18:40:09
 */
import './Department.css'
import React, { createRef, useState, useEffect } from 'react'
import { Row, Col, Table, message, Modal } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  WarningOutlined
} from '@ant-design/icons';
import EmployeeHeader from '../../components/employee/employee_header/EmployeeHeader';
import EmployeeConTitle from '../../components/employee/employee_content/EmployeeConTitle';
import EmployeeFooter from '../../components/employee/employee_footer/EmployeeFooter';
import Mypagination from '../../components/myPagination/MyPagination';
import ComButton from '../../components/employee/ComButton';
import { alterColor, deleteColor } from './color/employeeColor'
import DepartModal from '../../components/employee/Modal/DepartModal';
import DeleteComModal from '../../components/employee/Modal/DeleteComModal';
import CantDelete from '../../components/employee/Modal/CantDelete';
import store from '../../redux/store.js'
import { AsyncGetDepartAction } from '../../redux/action/employeeAction/department.js'
import Axios from '../../utils/myAxios.js'
import QS from 'qs'

export default function Department() {

  // 表格
  const columns = [
    { title: '部门名称', dataIndex: 'departmentName', className: 'table_first_title', key: 'departmentName', width: 900, align: 'left' },
    {
      title: '管理',
      dataIndex: '',
      key: 'id',
      width: 150,
      className: 'table_actions',
      render: (text, record) => (<>
        <Row>
          <Col className="gutter-row" span={12}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='修改' BCcolor={alterColor} icon={<EditOutlined />} handleClick={showModal(0, record)} />
          </Col>
          <Col className="gutter-row" span={12}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='删除' BCcolor={deleteColor} icon={<DeleteOutlined />} handleClick={showModal(2, record, text)} />
          </Col>
        </Row>
      </>),
    },
  ];
  const [data, setData] = useState([])
  // 模态框状态
  const [isAddShow, setIsAddShow] = useState(false)
  const [isAlterShow, setIsAlterShow] = useState(false)
  const [isDeleteShow, setIsDeleteShow] = useState(false)
  const [isCantDeleteShow, setIsCantDeleteShow] = useState(false)
  const [addDepartName, setAddDepartName] = useState('')
  const [alterDepartName, setAlterDepartName] = useState('')
  const [delDepartId, setDelDepartId] = useState('')
  const addInputRef = createRef()
  const alterInputRef = createRef()
  // 分页
  // 当前页
  const [page, setPage] = useState(1)
  // 每页多少条
  const size = 10
  // 总条数
  const [count, setCount] = useState(0)
  // 改变页码
  function changePage(page) {
    setPage(page)
  }

  useEffect(() => {
    getDepList()
    store.subscribe(() => {
      // console.log(store.getState().departmentReducer);
      let { newArray } = store.getState().departmentReducer
      let { count } = store.getState().departmentReducer
      setData([...newArray])
      setCount(count)
    })
  }, [])
  useEffect(() => {
    getDepList()
  }, [page, count])
  useEffect(() => {
    // console.log(addDepartName);
    if (addDepartName !== '') {
      addDep()
      getDepList()
    }
  }, [addDepartName])
  useEffect(() => {
    console.log(delDepartId);
    // if (delDepartName !== '') {
    //   delDep()
    //   getDepList()
    // }
  }, [delDepartId])
  // 获取部门列表
  function getDepList() {
    store.dispatch(AsyncGetDepartAction(page, size))
  }
  // 添加部门
  function addDep() {
    Axios.post('http://172.16.123.141:8080/department/addDepartment',
      QS.stringify({
        departmentName: addDepartName
      }),
      {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        console.log('add', res.data);
        if (Number(res.data.code) === 430) {
          console.log('aaaa');
          message.warning(res.data.msg);
        }
      }).catch(err => {
        console.log(err);
      })
  }
  //删除部门
  function delDep() {
    console.log(delDepartId);
    // Axios.post('http://172.16.123.141:8080/department/deleteDepartment',
    //   QS.stringify({
    //     id: 15
    //   }),
    //   {
    //     headers: {
    //       "Content-Type": "application/x-www-form-urlencoded"
    //     }
    //   })
    //   .then(res => {
    //     console.log(res);
    //   })
  }
  // 显示模态框
  const showModal = (type, row, text,) => {
    // 2是删除，1是新增，0是修改
    return () => {
      switch (type) {
        case 0:
          setIsAlterShow(true)
          return
        case 1:
          setIsAddShow(true)
          return
        case 2:
          // 判断是否有关联数据，如果有关联数据，无法删除
          // 有关联数据
          // let state = false
          // if (state === true) {
          //   setIsCantDeleteShow(true)
          // } else {
          //   // 无关联数据
          //   delDepartId = row.id
          //   setIsDeleteShow(true)
          // }
          delDepartId = row.id
          console.log('delDepartId', delDepartId);
          setIsDeleteShow(true)
          return
        default:
          return
      }
    }
  };

  // 新增部门OK
  const handleAddOk = () => {
    // console.log(addInputRef.current.input.value);
    setAddDepartName(addInputRef.current.input.value)
    setIsAddShow(false);
  };
  // 删除部门
  function delDep() {
    console.log('delDepartId', delDepartId);
    // Axios()
  }
  // 修改部门OK
  const handleAlterOk = () => {
    console.log(alterInputRef.current.input.value);
    setAlterDepartName(alterInputRef.current.input.value)
    setIsAlterShow(false);
  };
  // 部门cancel 
  const handleAddCancel = () => {
    setIsAddShow(false);
  };
  const handleAlterCancel = () => {
    setIsAlterShow(false);
  };
  // 部门删除OK
  const handleDeleteOk = () => {
    setIsDeleteShow(false)
    console.log('aaa', delDepartId);
  }
  // 部门删除Cancel
  const handleDeleteCancel = () => {
    setIsDeleteShow(false)
  }
  // 不能删除cancle
  function handleCantDelCancel() {
    setIsCantDeleteShow(false)
  }
  return (
    <>
      {/* 头部 */}
      <Row>
        <Col span={24}>
          <EmployeeHeader />
        </Col>
      </Row>
      {/* 内容标题 */}
      <Row >
        <Col span={24} className='con_title'>
          <EmployeeConTitle title1='所有部门' title2='新增部门' handleClick={showModal(1)} />
        </Col>
      </Row>
      {/* 内容 */}
      <Row>
        <Col span={24}>
          <Table
            className='depart_theadSty '
            columns={columns}
            dataSource={data}
            pagination={{ position: ['none', 'none'] }}
            bordered
          />
        </Col>
      </Row>
      {/* 分页 */}
      <Row >
        <Col span={24} className='employee_footer'>
          <Mypagination
            page={page}
            size={size}
            count={count}
            changePage={changePage}
          ></Mypagination>
        </Col>
      </Row>

      {/* 模态框 */}
      <DepartModal
        title='新增部门'
        visible={isAddShow}
        onOk={handleAddOk}
        onCancel={handleAddCancel}
        inputRef={addInputRef}
        conTitle='新增部门'
        inputName='部门名称' />
      <DepartModal
        title='修改部门'
        visible={isAlterShow}
        onOk={handleAlterOk}
        onCancel={handleAlterCancel}
        inputRef={alterInputRef}
        conTitle='修改部门'
        inputName='部门名称' />
      <DeleteComModal
        title='消息'
        visible={isDeleteShow}
        onOk={() => handleDeleteOk(delDepartId)}
        onCancel={handleDeleteCancel}
        icon={<WarningOutlined style={{ color: 'white', fontSize: '25px', marginLeft: '1px', marginBottom: '2px' }} />}
        content={`确认删除${delDepartId}吗？此操作不可恢复！请确认已将基本资料转移给他人！`}
      />
      <CantDelete
        title='提示'
        visible={isCantDeleteShow}
        onCancel={handleCantDelCancel}
        icon={<WarningOutlined style={{ color: 'white', fontSize: '25px', marginLeft: '1px', marginBottom: '2px' }} />}
        content='有关联数据，无法删除'
      />
    </>
  )
}
